import React from 'react'
import PageTitle from 'component/page-title/index.jsx'

import Muntil from 'until/mm.jsx'
import Product from 'service/produce-service.jsx'




const _mm=new Muntil();
const _product=new Product();

class CategoryAdd extends React.Component{
    constructor(props){
        super(props);
        this.state={
            categoryList:[],
            parentId:0,
            categoryName: ''

        }

    }

    componentDidMount(){
        this.loadCategoryList()
    }

    onSubmit(e){
        let categoryName=this.state.categoryName.trim();
        if(categoryName){
            _product.saveCategory({
                parentId: this.state.parentId,
                categoryName: categoryName
            }).then(res=>{
                _mm.successTip(res)
                this.props.history.push('/produce-category/index')
            }),errMsg=>{
                _mm.errorTips(errMsg)
            }
        }else {
            _mm.errorTips('请输入品类名称')
        }
    }


    onValueChange(e){
        let name=e.target.name,
            value=e.target.value
        this.setState({
            [name]:value
        })
    }

    //加载品类列表
    loadCategoryList(){
        _product.getCatetgoryList().then(res=>{
            this.setState({
                categoryList:res
            })

        },errMsg=>{
            this.setState({
                categoryList:[]
            })
            _mm.errorTips(errMsg)
        });
    }



    render(){


        return(
            <div id="page-wrapper">
                <PageTitle title="品类列表">
                    <div className="row">
                        <div className="col-md-12">
                            <div className="form-horizontal">
                                <div className="form-group">
                                    <label className="col-md-2 control-label">所属品类</label>
                                    <div className="col-md-5">
                                       <select name="parentId" className="form-control" onChange={(e)=>{this.onValueChange(e)}}>
                                           <option value="0">根品类/</option>
                                           {
                                               this.state.categoryList.map((item,index)=>{
                                                   return   <option value={item.id} key={index} >
                                                                根品类/{item.name}
                                                            </option>
                                               })
                                           }
                                       </select>
                                    </div>
                                </div>
                                <div className="form-group">
                                    <label className="col-md-2 control-label">品类名称</label>
                                    <div className="col-md-5">
                                        <input type="text"
                                               name="categoryName"
                                               className="form-control"
                                               placeholder="请输入品类名称"
                                               onChange={(e)=>{this.onValueChange(e)}}
                                        />
                                    </div>
                                </div>
                                <div className="form-group">
                                    <div className="col-md-offset-2 col-md-10">
                                        <button type="submit"
                                                className="btn btn-primary"
                                                onClick={(e)=>{this.onSubmit()}}>
                                            提交
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </PageTitle>

            </div>
        )
    }

}

export default CategoryAdd;